<template>
  <div>
    <el-card style="width:100%">
      <p>AML规格分析</p>
      <el-input placeholder="请输入料号" v-model="productNo" class="input-with-select" style="width: 25%;">
        <el-button slot="append" icon="el-icon-search"  @click="getProductList"></el-button>
      </el-input>
      <!--<el-button type="primary" style="margin:15px 0;" @click="addInfo">新增料号</el-button>-->
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="500"
        >
          <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
          <el-table-column prop="productId" label="产品id" align="center"></el-table-column>
          <el-table-column prop="image" label="产品图片" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="物料" align="center"></el-table-column>
          <el-table-column prop="productNumber" label="料号" align="center"></el-table-column>
          <el-table-column prop="price" label="物料单价(人民币/含税)" align="center"></el-table-column>
          <el-table-column prop="stock" label="库存" align="center"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="250">
            <template slot-scope="scope">
              <el-row>
                <!--<el-button
                  type="primary"
                  size="mini"
                  @click="modifyInfo(scope.row)"
                  icon="el-icon-edit"
                ></el-button>-->
                <el-button type="primary" size="mini" @click="checkDetail(scope.row,index)">查看详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { LIAOHAO_GUIGELIST } from "@/utils/api";
import { Message } from 'element-ui'
export default {
  data() {
    return {
      productCode:"",
      productNo: "",
      id:0,
      tableData: [
        // {
        //   id: 0,
        //   image: "",
        //   manufacturerCode: "12312",
        //   manufacturer: "2335451",
        //   storeInfo: "BMW",
        //   pack: "sfds423g23g",
        //   specsBook: "10",
        //   stock: "吸塑",
        //   pricestocks: "xxx",
        //   productArea: "100"
        // }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      id: 0
    };
  },
  mounted() {
       this.getProductList();
  },
  methods: {
    addInfo() {
      this.$router.push({
        path: "addSeries",
        query: {
          pid:''+this.id,
          handler: "edit",
          product:{
            productCode: this.productNo,
            produceName: "",
            price: "",
            stock: "",
            isShow: "0"
          }}
      });
    },
    getProductList() {
      LIAOHAO_GUIGELIST({
        productNumber: this.productNo,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.total = res.data.count;
        if(this.total>0){
          this.id=this.tableData[0].productId
          console.log('++++>'+this.id)
          this.productCode=this.tableData[0].productCode
          console.log('+++productCode+>'+this.productCode)
        }else{
          this.$message.error('无此物料数据')
        }
      });
    },
    checkDetail(row) {
       this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    modifyInfo(row) {
      // this.$router.push({
      //     path:'handleProduct',
      //     query:{
      //         data:row
      //     }
      // })

      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "edit"
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getProductList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getProductList()
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>